import * as React from 'react';
import { IPro } from './pro';
import { Button, Space } from 'antd';
import { EllipsisOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { connect, Dispatch } from 'umi'
export interface IAppProps {
  proList: IPro[]
  dispatch: Dispatch
}

function App(props: IAppProps) {
  const columns: ProColumns<IPro>[] = [
    {
      title: '序号',
      render: (text: never, record: IPro, index: number) => <span>{index + 1}</span>,
    },
    {
      title: '产品名称',
      dataIndex: 'proname',
    },
    {
      title: '操作',
      render: () => (
        <Space>
          <Button type="ghost">编辑</Button>
          <Button danger>删除</Button>
        </Space>
      )
    }
  ];
  React.useEffect(() => {
    props.dispatch({
      type: 'pro/getProListAction'
    })
  }, [])
  return (
    <div style={{ height: '100%' }}>
      <ProTable<IPro>
        columns={columns}
        dataSource={props.proList}
        cardProps={{ title: '业务定制', bordered: true }}
        search={{}}
        
        headerTitle={
          <Button
            key="primary"
            type="primary"
            onClick={() => {
              alert('add');
            }}
          >
            添加
          </Button>
        }
        rowKey="proid"
        search={false}
      />
    </div>
  );
}

export default connect((state: any) => ({ proList: state.pro.proList }))(App)